<template>
  <div>
    <custom-button title="编辑" @click="handleEditDialog"></custom-button>
    <table v-loading="isLoading" cellspacing="0" class="label-table">
      <tbody>
        <tr>
          <td class="label">物模型名称</td>
          <td class="label-data">{{ modelData.name }}</td>
          <td class="label">产品数</td>
          <td class="label-data">
            {{ modelData.productCount }}
            <span class="btn-select" @click="handleToProduct">前往管理</span>
          </td>
          <td class="label">创建时间</td>
          <td class="label-data">
            {{ modelData.createTime | dateTimeFormatter }}
          </td>
        </tr>
        <tr />
        <tr>
          <td class="label">品类</td>
          <td class="label-data">
            {{ modelData.categoryName }}
          </td>
          <td colspan="1" class="label">备注</td>
          <td colspan="5" class="label-data">
            {{ modelData.remark }}
          </td>
        </tr>
      </tbody>
    </table>

    <el-dialog
      :visible.sync="isDialogVisible"
      title="基本信息"
      :width="handleScreenWidthToVw(574)+'px'"
    >
      <el-form
        ref="modelForm"
        :label-width="handleScreenWidthToVw(140)+'px'"
        :model="modelData"
        :rules="Rules"
      >
        <el-form-item label="物模型名称：" prop="name">
          <el-input v-model="modelData.name" placeholder="请输入物模型名称" />
        </el-form-item>
        <el-form-item label="标识符：" prop="identifier">
          <el-input v-model="modelData.identifier" class="form-input" placeholder="请输入标识符" />
        </el-form-item>
        <el-form-item label="所属品类：" prop="categoryEnum">
          <el-select v-model="modelData.categoryEnum" placeholder="请选择所属品类">
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品数：" prop="num">
          {{ modelData.productCount }}
          <!-- <el-button type="text" style="color: #0084ee;" @click="handleToProduct">
            前往管理
          </el-button> -->
        </el-form-item>
        <el-form-item label="备注说明：" prop="remark">
          <el-input v-model="modelData.remark" class="form-input" />
        </el-form-item>
      </el-form>

      <template slot="footer">
        <SubButton title="提交" @subClick="handleUpdateModel" />
        <CancelButton @cancelClick="handleCancel" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { updateMetadata, getModelDetail } from '../api'
import SubButton from '@/components/sub-button/index.vue'
import CancelButton from '@/components/cancel-button/index.vue'
import { handleScreenWidthToVw } from '@/utils/tools'
export default {
  components: { CancelButton, SubButton },
  props: {
    modelId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isDialogVisible: false,
      isLoading: false,
      modelData: {
        name: '',
        remark: '',
        num: 0,
        identifier: '',
        categoryEnum: '',
      },
      categoryList: [],
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [{ required: true, message: '物模型名称不能为空', trigger: 'blur' }],
        categoryEnum: [{ required: true, message: '请选择所属类别', trigger: ['blur', 'change'] }],
        identifier: [{ required: true, message: '请输入标识符', trigger: ['blur', 'change'] }],
      }
    },
  },
  watch: {},
  async created() {
    this.initModel()
    this.categoryList = await this.$systemEnum.getEnumByName(this.$CONST_ENUMS.MetadataCategoryEnum)
  },
  methods: {
    handleToProduct() {
      this.$router.push({
        path: '/device/create-product',
      })
    },
    async initModel() {
      this.isLoading = true
      const detail = await this.getModelData()
      const updateTime = detail.updateTime
        ? dayjs(detail.updateTime).format('YYYY-MM-DD HH:mm:ss')
        : '无'
      this.$route.meta.subTitle = '物模型名称: ' + detail.name + '  最近更新时间 ： ' + updateTime
      this.modelData = detail
      this.isLoading = false
    },
    async getModelData() {
      const detail = await getModelDetail(this.$route.query.id)
      return detail
    },
    async handleUpdateModel() {
      await this.$refs.modelForm.validate()
      await updateMetadata(this.modelData)
      const updateTime = this.modelData.updateTime
        ? dayjs(this.modelData.updateTime).format('YYYY-MM-DD HH:mm:ss')
        : '无'
      this.$route.meta.subTitle =
        '物模型名称: ' + this.modelData.name + '  最近更新时间 ： ' + updateTime
      this.isDialogVisible = false
    },
    async handleCancel() {
      this.modelData = await this.getModelData()
      this.isDialogVisible = false
    },
    handleEditDialog() {
      this.isDialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.btn-select {
  color: #0084ee;
  float: right;
  margin-right: vw(20px);
  cursor: pointer;
}
.label-table {
  width: 100%;
  margin: vw(20px) auto;
  border-collapse: collapse;

  td {
    border: 1px solid #999;
    border-collapse: collapse;
  }

  .label {
    width: vw(200px);
    font-size: vw(14px);
    line-height: vw(40px);
    color: #333;
    text-align: center;
    background: #f2f2f2;
  }

  .label-data {
    width: vw(328px);
    font-size: vw(14px);
    padding-left: vw(20px);
    color: #999;
    text-align: left;
  }
}

::v-deep {
  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    text-align: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }
}
</style>
